<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染v-for</title>
</head>
<body>
    <div id="example-1">
        <!--in-->
        <ul>
            <li v-for="item in items">
                {{$index}}-{{message}}-{{item.text}}--{{item.uid}}
            </li>
        </ul>
        <!--of-->
        <ul>
            <li v-for="item of item_2.object" track-by="$index">
                {{$key}} : {{item}}
            </li>
        </ul>

        <ul>
            <li v-for="n in 10">{{ n }}</li>
        </ul>

    </div>

<script src="../lib/vue.js"></script>
<script>
    /*
    * v-for 块内，我们能够完全访问父组件作用域内的属性，
    * 另一个特殊变量$index,它是当前数组元素的索引
    * $key
    * */
    var data = {
        message : "every one",
        items : [
            {text : "hello vue.js" , uid : 8},
            {text : "hello angular.js" , uid : 1},
            {text : "hello react.js" , uid : 9},
            {text : "hello backBone.js" , uid : 7},
            {text : "hello javascript" , uid : 6}
        ],
        item_2 : {
            object :{
                message : "hello vue.js" ,
                uid : 8
            }
        }
    }

    var exampleVm = new Vue({
        el : "#example-1",
        data : data
    })
</script>
</body>
</html>